<template>
  <div>
    <el-dialog v-model="dialogVisible" class="c-dialog-fixed" width="1200px" title="缓存已禁用Token列表" @open="handleOpen">
      <el-alert type="warning" title="提示" show-icon>
        <div>以下是系统中已禁用且访问时间还未过期的Token（包含手动禁用、已进行刷新过的Token），会存放在后台缓存中，用于禁用对应的Token访问。</div>
        <div>如果系统用的是MemoryCache等非持久化缓存，请在系统启动或缓存清空后再点击重载禁用Token按钮。</div>
      </el-alert>
      <list ref="listRef" v-model:tableLoading="tableLoading">
        <template #toolbar-left>
          <el-tooltip content="重新加载已禁用的且访问时间未过期的Token到后台缓存中">
            <el-button type="primary" @click="reloadDisabledToken"
              :disabled="!can('EDIT', 'sys.token')">重载禁用Token</el-button>
          </el-tooltip>
        </template>
      </list>
    </el-dialog>
  </div>
</template>
<script setup>

import { ref, useTemplateRef } from "vue";
import api from "@/api/sys/token"
import { can } from "@/utils/permission";

import list from "./list.vue";

const tableLoading = ref(false)
const dialogVisible = ref(false)

const listRef = useTemplateRef("listRef")

const reloadDisabledToken = async () => {
  tableLoading.value = true;
  const res = await api.reloadDisabledToken();
  tableLoading.value = false;
  if (res.code != 0) {
    return;
  }
  await listRef.value.getData();
}
const open = async () => {
  dialogVisible.value = true
}

const handleOpen = async () => {
  await listRef.value.getData({
    inCacheDisabled: true,
  });
}

defineExpose({
  open
})
</script>